<template>
	<div class="border border-[#FFB848]">
		<div class="bg-[#FFB848] text-[#fafafa] text-base p-2 flex flex-wrap">
			<div class="w-1/2 pl-2">{{ $t('report.sales.overview') }}</div>
		</div>
		<div class="m-2 border">
			<el-row class="bg-[#FFEBCD]">
				<el-col :span="4" class="border-r border-b p-2">{{ $t('report.grouping.clickCount') }}</el-col>
				<el-col :span="4" class="border-r border-b p-2">{{ $t('operateData.rate') }}</el-col>
				<el-col :span="4" class="border-r border-b p-2">{{ $t('report.sales.actualVolume')}}</el-col>
				<el-col :span="4" class="border-r border-b p-2">{{$t('report.sales.actual')}}</el-col>
				<el-col :span="4" class="border-r border-b p-2">{{ $t('operateData.discountTotal') }}</el-col>
				<el-col :span="4" class="border-r border-b p-2">{{ $t('report.sales.gifts') }}</el-col>
			</el-row>
			<el-row>
				<el-col :span="4" class="border-r border-b p-2">{{ Number(item.totalPrice * 1).toFixed() || '0'
					}}</el-col>
				<el-col :span="4" class="border-r border-b p-2">{{ item.clickConversionRate || '0' }}</el-col>
				<el-col :span="4" class="border-r border-b p-2">{{ Number(item.totalSaleQuantity).toFixed(2) || '0'
					}}</el-col>
				<el-col :span="4" class="border-r border-b p-2">{{ Number(item.totalPrice).toFixed(2) || '0' }}</el-col>
				<el-col :span="4" class="border-r border-b p-2">{{ Number(item.totalDiscountPrice).toFixed(2) || '0'
					}}</el-col>
				<el-col :span="4" class="border-r border-b p-2">{{ Number(item.totalGift).toFixed(2) || '0' }}</el-col>
			</el-row>
			<el-row class="bg-[#FFEBCD]">
				<el-col :span="4" class="border-r p-2">{{ $t('operateData.totalCost') }}</el-col>
				<el-col :span="4" class="border-r p-2">{{ $t('operateData.profit') }}</el-col>
				<el-col :span="4" class="border-r p-2">{{ $t('operateData.averagePrice') }}</el-col>
				<el-col :span="4" class="border-r p-2">{{ $t('operateData.costPrice') }}</el-col>
				<el-col :span="4" class="border-r p-2">{{ $t('operateData.gross') }}</el-col>
			</el-row>
			<el-row>
				<el-col :span="4" class="border-r p-2">{{ Number(item.totalCostPrice).toFixed(2) || '0' }}</el-col>
				<el-col :span="4" class="border-r p-2">{{ Number(item.profitAmount).toFixed(2) || '0' }}</el-col>
				<el-col :span="4" class="border-r p-2">{{ Number(item.averageRetailPrice).toFixed(2) || '0' }}</el-col>
				<el-col :span="4" class="border-r p-2">{{ Number(item.averageCostPrice).toFixed(2) || '0' }}</el-col>
				<el-col :span="4" class="border-r p-2">{{ item.grossProfitRate || '0' }}</el-col>
			</el-row>
		</div>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()

let props = defineProps({
	item: {
		type: Object,
		default: {}
	}
})
</script>
